/* 
    Document   : style
    Created on : 03 2, 12, 6:38:33 PM
    Author     : pauld
    Description:
        Purpose of the stylesheet follows.
*/

/**********************
*******Defaults*******
**********************/

body { 
    background-color: #f9f9f9;
}

#header-wrap, #content-wrap, #upper-footer-wrap, #lower-footer-wrap {
    overflow: hidden;
}

#header-wrap {
    background-color: #727272;
    background: -webkit-gradient(radial, center center, 0, center center, 460, from(#939393), to(#727272));
    background: -webkit-radial-gradient(50% 130%, #939393, #727272);
    background: -moz-radial-gradient(50% 130%, #939393, #727272);
    background: -ms-radial-gradient(50% 130%, #939393, #727272);
    padding-bottom: 15px;
    border-bottom: 2px solid #444444;
}

#bar {
    width: 100%;
    height: 10px;
    background-color: #444444;
}

h1 {
    color: #4f4f4f;
    font-family: "Garamond";
    font-size: 25px;
    text-shadow: 0 1px 0 #e8e8e8;
}

h2 {
    color: #4f4f4f;
    font-family: "Garamond";
    font-size: 23px;
    text-shadow: 0 1px 0 #e8e8e8;
}

h3 {
    font-family: "Arial";
    color: #4f4f4f;
    font-size: 19px;
    text-shadow: 0 1px 0 #e8e8e8;
}

h4 {
    color: #666666;
    font-family: "Garamond";
    font-size: 17px;
    text-shadow: 0 1px 0 #e8e8e8;
}

h6 {
    color: #7e7e7e;
    font-family: "Arial";
    font-size: 14px;
    font-weight: bold;
    line-height: 2px;
    text-shadow: 0 1px 0 #e8e8e8;
}

ul {
    list-style: none;
    overflow: hidden;
    margin-bottom: 0px;
}

ul>li {
    margin-left: 0px;
}

a {
    text-decoration: none;
    color: #2D2D2D;
    border: none;
    font-size: 15px;
    font-weight: bold;
    text-shadow: 0 1px 0 #e8e8e8;
}

a:hover {
    text-decoration: underline;
    color: #2D2D2D;
    text-shadow: 0 1px 0 #e8e8e8;
}

a.box-type{
     color: #636363;
     font-weight: bold;
     background-color: #b7b7b7;
     padding: 3px 5px;
     border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    text-shadow: 0 1px 0 #e8e8e8;
    box-shadow: 1px 1px 1px #cbcbcb;
    -webkit-box-shadow: 1px 1px 1px #cbcbcb;
    transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
}

a.box-type:hover {
     text-decoration: none;
    box-shadow: 3px 3px 3px #cbcbcb;
    -webkit-box-shadow: 3px 3px 3px #cbcbcb;
}

.styled-form {
    background-color: #dbdbdb;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    padding: 15px 20px;
    width: 190px;

}

.metro-box {
    height: 200px;
    margin-top: 9px;
    background-color: #dbdbdb;
    background: -webkit-gradient(radial, center center, 0, center center, 460, from(#dbdbdb), to(#B7B7B7));
    background: -webkit-radial-gradient(50% 180%, #dbdbdb, #B7B7B7);
    background: -moz-radial-gradient(50% 180%, #dbdbdb, #B7B7B7);
    background: -ms-radial-gradient(50% 180%, #dbdbdb, #B7B7B7);
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    box-shadow: inset 0 1px 1px 1px #7A7A7A;
    -webkit-box-shadow: inset 0 1px 1px 1px #7A7A7A;
}

.metro-box>h3, .metro-box>p, .metro-box>a {
   margin: 0px 6px;
}

.metro-box>p, .metro-box>div>p {
   font-weight: 500;
   color: #636363;
   text-justify: auto;
   font-size: 15px;
   text-shadow: 0 1px 0 #e8e8e8;
}

.metro-box>a, .metro-box>p>a {
   font-size: 11px;
}

#metro-box3 {
    height: 250px;
}

#index-login-form {
   margin-top: 30px;
}

#index-login-form>input.form-inputs {
    box-shadow: inset 0 1px 1px 1px #777777;
    -webkit-box-shadow: inset 0 1px 1px 1px #777777;
}

#index-login-form>input.submit-button {
   margin-left: 0px;
   background-color: #777777;
}

#index-login-form>input.submit-button:hover {
   background-color: #9B9B9B;
}

label {
    color: #444444;
    font-size: 15px;
    font-weight: bold;
    text-shadow: 0 1px 0 #e8e8e8;
}

.form-span {
    color: #444444;
}

.form-inputs {
    border: none;
    padding: 5px 5px;
    font-size: 13px;
    color: #4f4f4f;
    margin-bottom: 9px;

    box-shadow: inset 0 1px 1px 1px #cbcbcb;
    -webkit-box-shadow: inset 0 1px 1px 1px #cbcbcb;

    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;

    transition: background-color .5s;
    -webkit-transition: background-color .5s;
    -moz-transition: background-color .5s;
    -o-transition: background-color .5s;
}

.form-inputs:hover, .form-inputs:focus {
    background-color: #f6f6f6;
}

.menu {
    margin-top: 55px;
    padding-left: 80px;
}

.menu>li {
    float: left;
    margin: 0px 15px;   
}

.menu>li>a, .menu>li>form>a {
    color: #f0f0f0;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: bold;
    transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    text-shadow: 0 1px 0 #444444;
}

.menu>li>a:hover, .menu>li>form>a:hover {
    color: #f0f0f0;
    text-decoration: none;
    text-shadow: 2px 2px 1px #444444;
}

#main-menu {
    padding-left: 10px;
}

#main-menu>li {
    margin: 0px 15px;   
}

#main-menu>li>a, #main-menu>li>form>a {
    font-size: 13px;
}

.submit-button {
    -moz-transition: background-color 0.5s ease 0s;
    background-color: #A1A1A1;
    border: medium none;
    border-radius: 5px 5px 5px 5px;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: normal;
    margin-left: 5px;
    padding: 1px 5px;
    text-shadow: 0 1px 0 #656565;
}

.submit-button:hover {
    background-color: #838383;
    cursor: pointer;
}

#content {
    margin-top: 30px;
}

.modal-bg {
    display: none;
    background-color: #383838;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 500;
    top: 0;
}

.modal-box {
    display: none;
    z-index: 600;
    position: fixed;
}

.error-pane>li {
    display: block;
    background-color: #FF9191;
    padding: 2px 10px;
    margin: 10px 5px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    box-shadow: 1px 1px 1px #e2e2e2;
    -webkit-box-shadow: 1px 1px 1px #e2e2e2;
    text-shadow: 1px 1px 0px #ffffff;
}

.important {
    font-size: 17px;
    font-weight: bold;
}

.error {
    background-color: #FFEA75 !important;
}

.success {
    background-color: #D6EFD1 !important;
}

#upper-footer-wrap {
    margin-top: 50px;
    background-color: #8c8c8c;
    height: 50px;
    line-height: 50px;
}

#upper-footer>div>ul {
    height: 50px;
    line-height: 50px;
    position: relative;
    bottom: 55px;
}

#upper-footer>div>ul>li {
    margin: 0px 5px;
}

#upper-footer>div>ul>li>a {
    font-size: 13px;
    color: #f0f0f0;
    text-shadow: 0 0 0 #444444;
}

#upper-footer>div>ul>li>a:hover {
    text-shadow: 2px 2px 2px #444444;
}

#lower-footer-wrap {
    background-color: #DDDDDD;
    height: 30px;
    line-height: 30px;
}

#lower-footer>center>p {
    color: #3F3F3F;
    font-size: 10px;
    font-weight: bold;
    text-shadow: 0 1px 0 #e8e8e8;
}

/**********************
***Login/Transaction***
**********************/

#login-form, #buy-form {
    width: 390px;
    margin-top: 50px;
    margin-bottom: 20px;
    box-shadow: 2px 2px 1px #cbcbcb;
    -webkit-box-shadow: 1px 1px 1px #cbcbcb;
}

#login-form>h1 {
    font-size: 23px;
    margin-bottom: 0px;
}

#login-form>ul {
    margin: 25px 0px;
}

#login-form>ul>li {
    margin: 5px 2px;
    box-shadow: 1px 2px 1px #e8e8e8;
}

#login-form>fieldset, #buy-form>fieldset {
    margin-bottom: 10px;
}

#login-form>fieldset>label, #buy-form>fieldset>label {
    font-size: 20px;
}

#login-form>fieldset>input.form-inputs, #buy-form>fieldset>input.form-inputs {
    font-size: 20px;
    width: 380px;
}

#login-form>.submit-button, #buy-form>.submit-button {
    font-size: 20px;
    padding: 3px 10px;
    margin-bottom: 10px;
    margin-left: 0px;
}

#error-page>h1 {
    font-size: 50px;
    margin-top: 50px;
    margin-bottom: 100px;
}

/**********************
*******Accordion*******
**********************/

#accordion>h3 {
    background-color: #bababa;
    padding: 0px 15px;
    margin-top: 5px;
    margin-bottom: 5px;
    border: 1px solid #606060;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

#accordion>h3>a {
    color: #545454;
}

#accordion>div {
    padding: 15px;
    background-color: #ffffff;
    border: 1px solid #f4f4f4;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    box-shadow: inset 1px 1px 1px 1px #e2e2e2;
    -webkit-box-shadow: inset 1px 1px 1px 1px #e2e2e2;
}

/**********************
*******Dashboard*******
**********************/

#dashboard {
    margin-top: 15px;
    margin-bottom: 15px;
}

#dashboard-logo>a>img {
    margin-left: 50px;
}

/**********************
*Register/Profile Page*
**********************/

#register-form, #profile-form {
    width: 440px;
}

#register-form>.form-inputs, #profile-form>.form-inputs {
    width: 425px;
}

#register-form>textarea {
    width: 425px;
    height: 80px;
}

#register-error_pane {
    margin-top: 47px;
}

#changePW-form {
    width: 390px;
}

#changePW-form>label, #changePW-form>input.form-inputs, #changePW-form>input.submit-button {
    font-size: 20px;
}

#changePW-form>input.form-inputs {
    width: 380px;
}

#changePW-form>input.submit-button {
    margin-top: 20px;
    margin-left: 0px;
    padding: 5px 10px;
}

/**********************
*******Main Page*******
**********************/

#search-products {
    background-color: #444444;
    height: 45px;
    line-height: 45px;

    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;

    box-shadow: 0px 1px 2px #7C7C7C;
    -webkit-box-shadow: 0px 1px 2px #7C7C7C;
}

#search-products>form>input{
    font-size: 12px;
}

#search-products>form>input.form-inputs {
    background-color: #C9C9C9;

    box-shadow: inset 1px 0px 1px 2px #D8D8D8;
    -webkit-box-shadow: inset 1px 0px 1px 2px #D8D8D8;
}

#search-products>form>input.submit-button {
    background-color: #777777;
    padding: 4px 10px;

    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}

#product-list {
    padding-top: 10px;
}

#product-list>li>a {
    width: 200px;
    height: 250px;
    background-color: #dbdbdb;
    color: #727272;
    float: left;
    margin: 12px;
    padding: 5px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
}

#index-product-list>li>a {
    width: 135px;
    height: 165px;
    background-color: #f0f0f0;
    color: #727272;
    float: left;
    margin: 10px 50px;
    padding: 1px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
}


#product-list>li>a:hover {
    text-decoration: none;
    box-shadow: inset -1px 1px 1px 2px #cbcbcb;
    -webkit-box-shadow: inset -1px 1px 1px 2px #cbcbcb;
}

#index-product-list>li>a:hover {
    text-decoration: none;
    box-shadow: 1px 1px 2px #444444;
    -webkit-box-shadow: 1px 1px 2px #444444;
}

#product-list>li>a>ul {
   padding-top: 20px;
}

#product-list>li>a>ul>li {
    font-weight: normal;
}

#product-list>li>a>span {
    color: #727272;
    font-size: 17px;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1px;
}

#index-product-list>li>a>span {
    font-size: 10px;
}

/**********************
***View Product Page***
**********************/

#product-view {
    margin-bottom: 50px;
    padding-bottom: 15px;
    background-color: #ffffff;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    box-shadow: inset 1px 0px 1px 1px #E0E0E0;
    -webkit-box-shadow: inset 1px 1px 1px 1px #E0E0E0;
}

#product-view>a.submit-button {
   margin: 15px;
   padding: 5px 15px;
}

#product-view>a.submit-button:hover{
   text-decoration: none;
   color: #ffffff;
   text-shadow: 0 1px 0 #656565;
}

#product-view>p {
   color: #545454;
   font-size: 15px;
   line-height: 17px;
   text-justify: auto;
}

#product-view>p>b {
    font-size: 16px;
    color: #444444;
}

#product-view>h2, #product-view>h3, #product-view>p, #product-view>form>p, #product-view>form>.submit-button {
    margin-left: 15px;
}

#product-view>form>.submit-button {
   padding: 5px 25px;
   margin-bottom: 15px;
}

#product-comments>h4 {
   margin-bottom: 0px;
}

#comment-list>li {
    width: 448px;
    background-color: white;
    padding: 5px;
    margin: 8px 0;
    border: 1px solid #a1a1a1;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
   box-shadow: 1px 1px 1px #cbcbcb;
    -webkit-box-shadow: 1px 1px 1px #cbcbcb;
}

#comment-list>li>p {
    font-size: 15px;
    line-height: 15px;
}

#comment-form {
    width: 420px;
}

/**********************
*****Profile Page*****
**********************/

#profile-collection {
    margin-top: 20px;
    overflow: scroll;
    height: 580px;
    background-color: #ffffff;
    box-shadow: inset 1px 1px 1px 1px #cbcbcb;
    -webkit-box-shadow: 1px 1px 1px #cbcbcb;
    text-shadow: 0 2px 0 #f0f0f0;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}

#profile-collection>h1 {
    padding-left: 15px;
}

#collection-list>li {
    color: #444444;
    font-weight: bold;
    float: left;
    background-color: white;
    border: 1px solid #a1a1a1;
    margin: 10px;
    padding: 10px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    width: 180px;
    height: 100px;
    box-shadow: 1px 1px 1px #cbcbcb;
    -webkit-box-shadow: 1px 1px 1px #cbcbcb;
    text-shadow: 0 2px 0 #f0f0f0;
}

#profile-form {
    width: 400px;
    margin: 0px 15px;
}

#profile-form>h1{
    color: #ffffff;
    font-size: 35px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #444444;
}

#profile-form>.form-inputs {
    width: 385px;
}

#profile-form>.submit-button {
    font-size: 16px;
    padding: 5px 20px;
}

/**********************
*****Admin Panel*******
**********************/

#create-manager-form {
    width: 256px;
}

#create-manager-interface>li, #create-product-interface>li {
    float: left;
    margin-right: 40px;
}

.locked-list>li {
    margin: 5px 0px;
}

.locked-list>li>form {
    font-weight: bold;
    font-size: 15px;
    color: #3A3A3A;
}

/**********************
*****Product Panel*****
**********************/

#create-product-form, #edit-product-form{
     width: 256px;
}

#create-product-form>.form-inputs, #edit-product-form>.form-inputs {
     width: 250px;
}

.product-panel-list>li>a {
    color: #3A3A3A;
    font-weight: bold;
    font-size: 13px;
    text-shadow: 0 1px 0 #EAEAEA;
}

/**********************
*****Finance Panel*****
**********************/

#total-sales {
    color: #BCBCBC;
    font-size: 35px;
}

#total-sales>b {
    color: #444444;
    font-size: 40px;
}

th {
   font-weight: bold;
   font-size: 30px;
   color: #444444;
   padding: 5px 25px;
}

td {
   font-size: 20px;
   color: #444444;
   padding: 5px 25px;
}